<style>
.bc-player-{{player_id}}_default, .bc-player-{{player_id}}_default-index-0 {
    width: 100% !important;
    overflow: visible;
}
.bc-player-{{player_id}}_default .vjs-menu-button-inline:hover, .bc-player-{{player_id}}_default.vjs-no-flex .vjs-menu-button-inline {
    width: 12em;
}
.bc-player-{{player_id}}_default .vjs-big-play-button:active,
.bc-player-{{player_id}}_default .vjs-big-play-button:focus,
.bc-player-{{player_id}}_default:active .vjs-big-play-button,
.bc-player-{{player_id}}_default:hover .vjs-big-play-button.video-js .vjs-big-play-button:focus {
    outline: 0;
    border-color: #fff;
    background-color: #73859f !important;
    background-color: rgba(115, 133, 159, .5) !important;
    /*-webkit-transition: none;*/
    /*-moz-transition: none;*/
    /*-o-transition: none;*/
    /*transition: none;*/
}
.bc-player-{{player_id}}_default .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    width: 41px;
    left: 30px;
    background: #171a1b;
}
.bc-player-{{player_id}}_default .vjs-time-control.vjs-current-time {
    margin-left: 22px !important;
}
.vjs-mouse.bc-player-{{player_id}}_default .vjs-progress-control:hover .vjs-play-progress.vjs-slider-bar.vjs-keep-tooltips-inside:after {
    width: 10px;
}
.bc-player-{{player_id}}_default .vjs-menu-button-popup .vjs-menu .vjs-menu-item {
    font-weight: bold;
}
.bc-player-{{player_id}}_default .vjs-menu-button-popup .vjs-menu .vjs-menu-item:hover {
    text-shadow: none;
    color: inherit;
    background: rgba(115,133,159,.5);
    border-radius: 0;
}


</style>
<style>
    body .wrapper-xblock.level-element .xblock-header-primary {
        display: none !important;
    }
</style>
<div class="display-flex">
    <video data-video-id="{{ video_id }}"
        id="{{ video_player_id }}"
        data-account="{{ account_id }}"
        data-player="{{player_id}}"
        data-embed="default"
        data-application-id
        data-setup='{"playbackRates": [0.5, 1.0, 1.5, 2.0] }'
        width="100%"
        height="560"
        class="video-js"
        brightcove
        controls
        crossorigin="anonymous"
    >
    <!-- height="560" it's height of iframe minus height of control bar -->
      {{ transcripts }}
    </video>
    <script src="{{ brightcove_js_url }}"></script>
    {% for vjs_plugin in vjs_plugins %}
        <script type="text/javascript">{{ vjs_plugin }}</script>
    {% endfor %}
    <div id="transcript"></div>
</div>
